<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h1>这是 - {{title}}</h1>
        <p><input type="text" v-model="sum"><span>{{sum}}</span></p>
        <p><input type="text" v-model="abc.msg"><span>{{abc}}</span></p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    const { createApp, ref, reactive, computed, readonly } = Vue;

    createApp({
        setup(){
            const title = ref("计算属性");
            const arr = reactive([34,56,53,27,2]);

            const abc = readonly({msg:"hello"});

            const _sum = ref(arr.reduce((prev,val)=>prev+val));

            const sum = computed({
                get(){
                    return _sum.value;
                },
                set(v){
                    _sum.value = v;
                }
            });

            return { title, sum, abc }

        }
    }).mount(".app");

</script>
</html>